<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>商品管理</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">商品管理</h2>
        <a href="${pageContext.request.contextPath}/index.jsp" class="btn btn-secondary">返回首页</a>
    </div>
    <a href="addProduct.jsp" class="btn btn-primary mb-3">添加新商品</a>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>价格</th>
            <th>热销程度</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${productList}" var="product" varStatus="status">
            <tr>
                <td>${product.pname}</td>
                <td>${product.pprice}</td>
                <td>${product.pstate}</td>
                <td>
                    <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#updateModal${status.index}">编辑</button>&nbsp;&nbsp;
                    <button onclick="deleteProduct('${product.pid}')" class="btn btn-sm btn-danger">删除</button>
                </td>
            </tr>

            <!-- 修改商品的模态框 -->
            <div class="modal fade" id="updateModal${status.index}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">修改商品</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="product?method=update" method="post" enctype="multipart/form-data" class="form-horizontal">
                            <div class="modal-body">
                                <!-- 隐藏字段，用于传递商品ID -->
                                <input type="hidden" name="pid" value="${product.pid}">
                                <!-- 隐藏字段，用于传递旧图片路径 -->
                                <input type="hidden" name="oldPimage" value="${product.pimage}">
                                <!-- 隐藏字段，用于传递时间 -->
                                <input type="hidden" name="ptime" value="<fmt:formatDate value="${product.ptime}" pattern="yyyy-MM-dd"/>">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="pname" class="form-control" value="${product.pname}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">价格</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="pprice" class="form-control" value="${product.pprice}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">库存状态</label>
                                    <div class="col-sm-10">
                                        <input type="number" name="pstate" class="form-control" value="${product.pstate}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品图片</label>
                                    <div class="col-sm-10">
                                        <!-- 显示当前图片 -->
                                        <img src="${product.pimage}" width="180" height="180" alt="Current Image" class="img-thumbnail" style="max-width: 100%;">
                                        <!-- 图片文件输入 -->
                                        <input type="file" name="pimage" class="form-control-file">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品描述</label>
                                    <div class="col-sm-10">
                                        <textarea name="pinfo" class="form-control">${product.pinfo}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品类别</label>
                                    <div class="col-sm-10">
                                        <!-- 商品类别选择框 -->
                                        <select name="tid" class="form-control">
                                            <option value="1" ${product.tid == 1 ? 'selected' : ''}>宠物</option>
                                            <option value="2" ${product.tid == 2 ? 'selected' : ''}>玩具</option>
                                            <option value="3" ${product.tid == 3 ? 'selected' : ''}>狗粮</option>
                                            <option value="4" ${product.tid == 4 ? 'selected' : ''}>猫粮</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- 其他商品信息字段可以根据需要添加 -->
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">修改</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- Modal for Confirm Delete -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确定要删除这个商品吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入 Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script>
    function deleteProduct(pid) {
        // 显示确认删除的模态框
        $('#confirmDeleteModal').modal('show');
        // 设置删除按钮的点击事件
        $('#confirmDeleteBtn').off('click').on('click', function() {
            // 执行删除操作
            window.location.href = 'product?method=delete&pid=' + pid;
        });
    }
</script>
</body>
</html>